<!--
 * @Author: Melanklin Melanklin@163.com
 * @Date: 2025-07-03 12:31:31
 * @LastEditors: Melanklin Melanklin@163.com
 * @LastEditTime: 2025-07-04 08:32:28
 * @FilePath: \parking-statistics-project\src\views\ParkingData.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div style="background-color: #fff;width: 100vw;height: 100vh;">
    <!-- 月内停车数据 -->
    <div class="parkingData">
      <div class="box">今日登记：{{ data.parkingData.today }}</div>
      <div class="box">本周登记：{{ data.parkingData.week }}</div>
      <div class="box">本月登记：{{ data.parkingData.month }}</div>
    </div>
    <div>
      <div class="chart">
        <e-charts :option="data.sevenDaysParkingData"/>
      </div>
      <div class="chart">
        <e-charts :option="data.allParkingData"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import axios from 'axios';

const data = reactive({
  num : 0,
  parkingData:{
      today:0,
      week:0,
      month:0
  },
  sevenDaysParkingData:{
    title: {
      text: "近七天登记趋势",
    },
    legend: {
      orient: 'horizontal', // 水平排列
      bottom: 10,          // 距离底部10px
      data: ["登记数量"],
    },
    xAxis: {
      data: []
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: "登记数量",
        data: [],
        type: 'line',
        label :{show:true},
      }
    ]
  },
  allParkingData:{
    title: {
      text: '车辆停放时长分布',
    },
    legend: {
      // 设置图例显示在底部
      orient: 'horizontal', // 水平排列
      bottom: 10,          // 距离底部10px
      data: ['1天', '1-3天', '3-7天','7天以上'] // 对应series中的数据名称
    },
    series: [
      {
        type: 'pie',
        data: [],
        radius: '50%',
        //定义数字标注的格式
        label: {
          show: true,
          formatter: '{d}%'  // {b}表示名称，{d}表示百分比
        }
      },
    ]
  },
});

getParkingData()
getSevenDaysParkingData()

//获取停车的总数据
function getParkingData(){
    axios({
        method:"get",
        url:"/api/parking/getParkingData",
      }).then(res => {
        console.log(res)
        data.parkingData.today = res.data.data[0]
        data.parkingData.week = res.data.data[1]
        data.parkingData.month = res.data.data[2]
      })
      .catch(err => {
        console.log(err);
      });
}

//获取近7天的停车数据
function getSevenDaysParkingData(){
  axios({
        method:"get",
        url:"/api/parking/getSevenDaysParkingData",
      }).then(res => {
        console.log(res.data.data)
        data.sevenDaysParkingData.xAxis.data = []
        data.sevenDaysParkingData.series[0].data = []
        for(let i = res.data.data.length - 1; i >= 0; i--){
          console.log(res)
          data.sevenDaysParkingData.xAxis.data.push(res.data.data[i].date)
          data.sevenDaysParkingData.series[0].data.push(res.data.data[i].num)
        }
      })
      .catch(err => {
        console.log(err);
      });
}

getAllParkingDurationData()

//获取所有提车的时长占比
function getAllParkingDurationData(){
  axios({
        method:"get",
        url:"/api/parking/getMonthParkingDurationData",
      }).then(res => {
        console.log(res.data.data)
        data.allParkingData.series[0].data = []
        for(let i = 0; i < res.data.data.length; i++){
          console.log(res)
          data.allParkingData.series[0].data.push({
            name: data.allParkingData.legend.data[i],
            value: res.data.data[i].num
          })
        }
      })
      .catch(err => {
        console.log(err);
      });
}


</script>

<style>
.parkingData{
  display: flex;
}
.box{
  padding: 15px;
  background-color: #ece4e4;
}
.chart{
  height: 400px;
  min-width: 400px;
}
</style>
